<template>
  <div id="app">
    <div class="top_bar">
      <Button @click="Jump" type="text" icon="ios-arrow-back" ghost>返回</Button>
      <Button @click="Logout" type="text" icon="ios-power" ghost>登出</Button>
    </div>
    <router-view></router-view>
    <div class="bom_bar">
      <div>@ 2022 Adalab</div>
    </div>
    <div class="di"></div>
  </div>
</template>

<style>
.top_bar {
  background: #506b9e;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
}

.bom_bar {
  margin-top: 20px;
  background: #506b9e;
  width: 100%;
  height: 50px;
  color: aliceblue;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
}

.di {
  margin-bottom: 40px;
}
</style>

<script>

export default {
  methods: {
    Jump () {
      this.$router.go(-1)
    },
    Logout () {
      fetch('/api/logout').then((res) => {
        return res.json()
      }).then((json) => {
        if (json.status === 'OK') {
          this.$router.replace('/login')
          this.$Message.success('登出成功！')
        } else {
          throw Error(json.message)
        }
      }).catch((err) => {
        this.$Message.error(err.message)
      })
      // console.log(this)
    }
  }
}

</script>
